<template>
  <van-popup v-model:show="_show" round position="bottom" :before-close="handleClose">
    <van-cascader
      :title="title"
      v-model="cascaderValue"
      :options="options"
      @close="handleClose"
      @finish="onFinish"
      @change="onChange"
    />
  </van-popup>
</template>
<script setup>
import http from '@/utils/http'

const emits = defineEmits(['update:modelValue', 'update:show', 'update:desc', 'change'])
const props = defineProps({
  title: { type: String, default: '请选择' },
  // options: Array,
  modelValue: String,
  show: { type: Boolean, default: false },
  desc: String,
  type: String,
})

const _show = ref(props.show)
const cascaderValue = ref('')

const options = ref([])

const getData = (pId = '0') => {
  return http('/district_address/subList', {
    params: {
      pId,
    },
  }).then(res => {
    if (!res) return

    return res.map(item => {
      const newItem = { id: item.id, text: item.text, value: item.value, value: item.value, xq: item.xq }

      if (item.children) {
        newItem.children = item.children
          .filter(item => {
            if (props.type == 'native_place') {
              return !['柳湖办', '开发区', '原种场', '农场'].includes(item.text)
            } else {
              return true
            }
          })
          .map(item => {
            return {
              id: item.id,
              text: item.text,
              value: item.id,
              xq: item.xq,
            }
          })
      }

      return newItem
    })
  })
}

getData().then(res => {
  options.value = res
})

const getDataAll = () => {
  return http('/district_address/all').then(res => {
    return res
  })
}

// getDataAll().then(res => {
//   const data = solution(res, ['area', 'areajd', 'areajwh'])
//   options.value = data
// })

watch(
  () => props.show,
  () => (_show.value = props.show)
)

watch(
  () => props.modelValue,
  () => (cascaderValue.value = props.modelValue)
)

const handleClose = () => emits('update:show', false)

const onChange = ({ value, selectedOptions, tabIndex }) => {
  if (props.type == 'native_place') return

  const current = selectedOptions[selectedOptions.length - 1]
  const id = current.id

  if (!id) return

  if (current.xq) {
    current.children = [
      {
        text: '排屋',
        value: '排屋',
      },
      {
        text: '单元楼',
        value: '单元楼',
      },
    ]
  } else {
    getData(id).then(res => {
      if (res?.length) current.children = res
    })
  }
}

// 全部选项选择完毕后，会触发 finish 事件
const onFinish = ({ selectedOptions }) => {
  handleClose()
  emits('update:modelValue', cascaderValue.value)
  emits('update:desc', selectedOptions.map(option => option.text).join('/'))
  emits('change', selectedOptions)
}

function toTree(data) {
  const obj = {}
  data.map(item => {
    obj[item.id] = {
      id: item.id,
      parentId: item.parentId,
    }
  })
}

function solution(tableData, keys) {
  const hashTable = {}
  const res = []
  for (let i = 0; i < tableData.length; i++) {
    let arr = res
    let cur = hashTable
    for (let j = 0; j < keys.length; j++) {
      const key = keys[j]
      const filed = tableData[i][key]
      if (!cur[filed]) {
        const pusher = {
          text: filed,
          value: filed,
        }
        let tmp
        if (j !== keys.length - 1) {
          tmp = []
          pusher.children = tmp
        }
        cur[filed] = { $$pos: arr.push(pusher) - 1 }
        cur = cur[filed]
        arr = tmp
      } else {
        cur = cur[filed]
        arr = arr[cur.$$pos].children
      }
    }
  }
  return res
}
</script>
<style lang="scss" scoped></style>
